<template>
  <div class="exception-list">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>异常管理</el-breadcrumb-item>
        <el-breadcrumb-item>异常单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 查询条件 -->
    <el-card class="search-card">
      <div class="search-title">查询条件</div>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="异常单号：">
          <el-input v-model="searchForm.exceptionNo"></el-input>
        </el-form-item>
        <el-form-item label="客户订单号：">
          <el-input v-model="searchForm.customerOrderNo"></el-input>
        </el-form-item>
        <el-form-item label="派车单号：">
          <el-input v-model="searchForm.dispatchNo"></el-input>
        </el-form-item>
        <el-form-item label="异常类型：">
          <el-select v-model="searchForm.type" placeholder="交通事故">
            <el-option label="交通事故" value="交通事故"></el-option>
            <el-option label="货物损坏" value="货物损坏"></el-option>
            <el-option label="运输延误" value="运输延误"></el-option>
            <el-option label="货物丢失" value="货物丢失"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查 询</el-button>
          <el-button @click="handleReset">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 异常单列表 -->
    <el-card class="table-card">
      <div class="table-operations">
        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="exceptionNo" label="异常单号"></el-table-column>
        <el-table-column prop="customerOrderNo" label="客户订单号"></el-table-column>
        <el-table-column prop="dispatchNo" label="派车单号"></el-table-column>
        <el-table-column prop="reportTime" label="反馈时间"></el-table-column>
        <el-table-column prop="type" label="异常类型"></el-table-column>
        <el-table-column prop="status" label="处理进度"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <span class="pagination-info">当前第1/50页，每页15条，共500条记录</span>
        <div class="pagination-buttons">
          <el-button size="small">首页</el-button>
          <el-button size="small">上一页</el-button>
          <el-button size="small">下一页</el-button>
          <el-button size="small">尾页</el-button>
          <el-input size="small" v-model="currentPage" style="width: 50px"></el-input>
          <el-button type="primary" size="small">跳转</el-button>
        </div>
      </div>
    </el-card>

    <!-- 异常详情弹窗 -->
    <el-dialog title="异常详情" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false">
      <div class="exception-detail">
        <!-- 派车单信息 -->
        <div class="section">
          <div class="section-title">派车单信息</div>
          <el-table :data="[currentRow.dispatchInfo]" border style="width: 100%">
            <el-table-column prop="exceptionNo" label="异常单号"></el-table-column>
            <el-table-column prop="dispatchNo" label="派车单号"></el-table-column>
            <el-table-column prop="customerOrderNo" label="客户订单号"></el-table-column>
            <el-table-column prop="route" label="路线"></el-table-column>
            <el-table-column prop="dispatchTime" label="指派时间"></el-table-column>
            <el-table-column prop="carrier" label="承运商"></el-table-column>
            <el-table-column prop="plateNo" label="车辆"></el-table-column>
            <el-table-column prop="driver" label="司机"></el-table-column>
            <el-table-column prop="receiptTime" label="回单时间"></el-table-column>
          </el-table>
        </div>

        <!-- 异常信息 -->
        <div class="section">
          <div class="section-title">异常信息</div>
          <el-form :model="exceptionForm" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="当前节点">
                  <el-input v-model="exceptionForm.currentNode" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="异常类型">
                  <el-input v-model="exceptionForm.type" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="反馈人">
                  <el-input v-model="exceptionForm.reporter" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发现时间">
                  <el-input v-model="exceptionForm.findTime" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="反馈方式">
                  <el-input v-model="exceptionForm.reportMethod" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="反馈时间">
                  <el-input v-model="exceptionForm.reportTime" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="异常说明">
              <el-input type="textarea" v-model="exceptionForm.description" disabled :rows="3"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <!-- 附件 -->
        <div class="section">
          <div class="section-title">附件</div>
          <div class="image-list">
            <div class="image-item" v-for="(image, index) in exceptionForm.images" :key="index">
              <img :src="image.url" alt="异常图片">
              <div class="image-actions">
                <i class="el-icon-zoom-in" title="查看"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- 异常处理 -->
        <div class="section">
          <div class="section-title">异常处理</div>
          <el-form :model="handleForm" label-width="120px">
            <el-form-item label="异常影响">
              <el-input type="textarea" v-model="handleForm.impact" disabled :rows="3"></el-input>
            </el-form-item>
            <el-form-item label="责任认定">
              <el-input v-model="handleForm.responsible" disabled></el-input>
            </el-form-item>
            <el-form-item label="事故原因">
              <el-input type="textarea" v-model="handleForm.reason" disabled :rows="3"></el-input>
            </el-form-item>
            <el-form-item label="处理方式">
              <el-input type="textarea" v-model="handleForm.solution" disabled :rows="3"></el-input>
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="赔偿客户金额">
                  <el-input v-model="handleForm.customerCompensation" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="承运商承担金额">
                  <el-input v-model="handleForm.carrierCompensation" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      
      <!-- 添加底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ExceptionList',
  data() {
    return {
      searchForm: {
        exceptionNo: '',
        customerOrderNo: '',
        dispatchNo: '',
        type: ''
      },
      currentPage: 1,
      tableData: [{
        exceptionNo: '2018781',
        customerOrderNo: '8989009',
        dispatchNo: '6767666',
        reportTime: '2015-07-30 20:24:10',
        type: '交通事故',
        status: '未处理'
      },
      {
        exceptionNo: '2018781',
        customerOrderNo: '2018781',
        dispatchNo: '6767666',
        reportTime: '2015-07-30 20:24:10',
        type: '货物损坏',
        status: '处理中'
      },
      {
        exceptionNo: '2018781',
        customerOrderNo: '8989009',
        dispatchNo: '6767666',
        reportTime: '2015-07-30 20:24:10',
        type: '运输延误',
        status: '处理中'
      },
      {
        exceptionNo: '2018781',
        customerOrderNo: '8989009',
        dispatchNo: '6767666',
        reportTime: '2015-07-30 20:24:10',
        type: '货物丢失',
        status: '处理中'
      }],
      dialogVisible: false,
      currentRow: {
        dispatchInfo: {
          exceptionNo: '9099909',
          dispatchNo: '2018781',
          customerOrderNo: '0900932',
          route: '上海-杭州-北京',
          dispatchTime: '2015-07-30 20:24:10',
          carrier: '上海佳吉物流',
          plateNo: '沪A 389899',
          driver: '张春雨, 王大勇',
          receiptTime: '2015-07-30 20:24:10'
        }
      },
      exceptionForm: {
        currentNode: '在途运输',
        type: '交通事故',
        reporter: '张春雨',
        findTime: '2015-07-30 20:24:10',
        reportMethod: '电话',
        reportTime: '2015-07-30 20:24:10',
        description: '发生车车事故，需要临时维修',
        images: [{ url: 'path/to/image.jpg' }]
      },
      handleForm: {
        impact: '无法在客户要求时间内送达，客户非常不满意',
        responsible: '承运商',
        reason: '司机疲劳驾驶',
        solution: '通知承运商更换司机，与客户商讨赔偿事宜，与承运商商讨赔偿事宜',
        customerCompensation: '8000.00',
        carrierCompensation: '8000.00'
      }
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索条件：', this.searchForm)
    },
    handleReset() {
      this.searchForm = {
        exceptionNo: '',
        customerOrderNo: '',
        dispatchNo: '',
        type: ''
      }
    },
    handleView(row) {
      this.dialogVisible = true
      // 实际应用中这里需要根据row的数据获取详细信息
    }
  }
}
</script>

<style scoped>
.exception-list {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.table-operations {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 0;
  margin-bottom: 10px;
}

.exception-detail {
  padding: 20px;
}

.section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.image-item {
  position: relative;
  width: 150px;
  height: 150px;
  border: 1px solid #dcdfe6;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-actions {
  position: absolute;
  top: 5px;
  right: 5px;
}

.image-actions i {
  margin-left: 5px;
  cursor: pointer;
  color: #409EFF;
}

:deep(.el-dialog__body) {
  padding: 0;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #606266;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  color: #606266;
}
</style> 